
// 15、点击顶部加号，跳转到标签管理界面 10：59
// 16、正确实现全部标签和关注标签的切换 10：59
// 17、考虑没有登录态时，关注标签页面的友好提示 10：59

import React from 'react'
import "./style.scss"
import { Button, Tabs } from 'antd-mobile'
import { useNavigate } from 'react-router'
function Index() {
    const navigate=useNavigate()
    const tabs=[{
        tit:'前端',
        btn:'关注'
    },{
        tit:'Javascript',
        btn:'关注'
    },{
        tit:'后端',
        btn:'关注'
    },{
        tit:'Github',
        btn:'关注'
    },{
        tit:'面试',
        btn:'关注'
    },{
        tit:'架构',
        btn:'关注'
    },{
        tit:'代码规范',
        btn:'关注'
    },{
        tit:'Vue.js',
        btn:'关注'
    },]
    const rtabs=[{
        tit:'前端',
        btn:'关注'
    },{
        tit:'Javascript',
        btn:'关注'
    },{
        tit:'后端',
        btn:'关注'
    },{
        tit:'Github',
        btn:'关注'
    },{
        tit:'面试',
        btn:'关注'
    },{
        tit:'架构',
        btn:'关注'
    },{
        tit:'代码规范',
        btn:'关注'
    },{
        tit:'Vue.js',
        btn:'关注'
    },{
        tit:'后端',
        btn:'关注'
    },{
        tit:'Github',
        btn:'关注'
    },{
        tit:'面试',
        btn:'关注'
    },]
    const token =localStorage.getItem('token')
    const toLogin=()=>{
        navigate('/login')
    }
    const goBack=()=>{
        navigate('/home/main')
    }
    return (
        <div className='joinWrap'>
            <div className="header">
                <span onClick={()=>goBack()}>返回</span>
                <h3>标签管理</h3>
                <span></span>
            </div>
            <div className="lists">
                <Tabs>
                    <Tabs.Tab title='全部标签' key='fruits'>
                    <ul>
                            {
                            tabs.map((v,i)=>{
                                return(
                                    <li key={i}><span>{v.tit}</span><button>{v.btn}</button></li>
                                    )
                            })
                        }
                        </ul>
                    </Tabs.Tab>
                    <Tabs.Tab title='关注' key='vegetables'>
                    {/* 20、登录成功后，正确展示关注标签 10：59 */}
                        {token?
                            <ul>
                            {
                            rtabs.map((v,i)=>{
                                return(
                                    <li key={i}><span>{v.tit}</span><button>{v.btn}</button></li>
                                    )
                            })
                        }
                        </ul>
                        :<div className="tips">
                            <p>登陆后查看关注</p>
                            <button onClick={()=>toLogin()}>登录</button>
                        </div>
                        }
                    </Tabs.Tab>
                    
                </Tabs>
            </div>
        </div>
    )
}

export default Index
